<template>
  <div>
    <div class="title">
      {{ title }}
    </div>
    <div>
      <div class="bodyList" v-if="bodyList.length !== 0">
        <a-collapse
          ref="collapse"
          :bordered="false"
          expand-icon-position="right"
        >
          <a-collapse-panel
            :style="headerStyle"
            :header="item.secondItemName"
            v-for="(item, index) in bodyList"
            :key="index"
            :open="false"
          >
            <div
              class="bodyTitle"
              :key="index1"
              v-for="(item1, index1) in bodyMapper"
            >
              <div v-if="item1.children">
                <div
                  style="font-size: 15px;font-weight:500;background-color: #fff;padding: 5px 10px;"
                >
                  {{ item1.text }}
                </div>
                <div
                  :key="index2"
                  v-for="(item2, index2) in item1.children"
                  class="listWrap"
                  style="border:none;padding:1px 0px;"
                >
                  <div v-if="item2.children">
                    <div class="leftClass title-lv2">
                      {{ item2.text }}
                    </div>
                    <div
                      :key="index3"
                      v-for="(item3, index3) in item2.children"
                    >
                      <div class="listWrap" style="border:none;color: gray;">
                        <div class="leftClass" style="font-size: 15px;">
                          {{ item3.text }}
                        </div>
                        <div class="middleClass"></div>
                        <div class="rightClass">
                          {{ item[item3.field] }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <div class="listWrap" style="border:none;color: gray;">
                      <div class="leftClass" style="font-size: 15px;">
                        {{ item2.text }}
                      </div>
                      <div class="middleClass"></div>
                      <div class="rightClass">
                        {{ item[item2.field] }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                <div class="listWrap" style="padding:5px 0px;">
                  <div class="leftClass" style="font-size: 15px;">
                    {{ item1.text }}
                  </div>
                  <div class="middleClass"></div>
                  <div class="rightClass">
                    {{ item[item1.field] }}
                  </div>
                </div>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </div>
      <div v-else>
        <div class="noBgClass"></div>
      </div>
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
import { getCommonData } from "@/api/table/index.js";
import loadingType from '@/views/DetailPage/mixinsloadingtype'

export default {
  data() {
    return {
      title: "",
      current: 0,
      bodyList: [],
      formType: 0,
      bodyMapper: [],
      headerStyle:
        'margin-bottom: "10px";background-color: "red";padding: "10px",',
    };
  },
  mixins:[loadingType],
  props: {
    option: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  created() {
    this.title = this.$route.query.title.split("发起")[1];
    this.getHeader();
  },
  methods: {
    // 获取动态表头
    getHeader() {
      this.$emit("loadingType", true);

      let url = "/adminAnalysis/query/header";
      let tableId = "";
      if (
        this.option.sId === "xmtzysTable" ||
        this.option.sId === "zxtzysTable"
      ) {
        tableId = "17";
      } else if (this.option.sId.indexOf("xmtzysNextTable") !== -1) {
        tableId = "22";
      } else if (this.option.sId.indexOf("zxtzysNextTable") !== -1) {
        tableId = "23";
      }

      getCommonData(url, {
        tableId: tableId,
      }).then((res) => {
        // this.$emit("loadingType", false);
        this.headLoadingType = false
        if (res.success) {
          this.bodyMapper = res.data;
        }
        this.getCommonData();
      });
    },
    // 获取数据
    getCommonData() {
      let url = "";
      let tableId = "";
      if (this.option.sId === "zxtzysTable") {
        url = "/adjustSpecific/findByFormGuid";
      } else if (this.option.sId === "xmtzysTable") {
        url = "/adjustBudget/findByFormGuid";
      } else if (this.option.sId === "xmtzysNextTable") {
        url = "/adjustBudget/year/findByFormGuid";
      } else if (this.option.sId === "zxtzysNextTable") {
        url = "/adjustSpecific/year/findByFormGuid";
      }

      this.bodyList = [];
      getCommonData(url, {
        formGuid: this.option.formGuid,
      }).then((res) => {
        this.dataLoadingType = false
        if (res.success) {
          this.bodyList = res.data;
        } else {
          this.bodyList = [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 19px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #333333;

  padding: 10px;
}

.bodyHeader {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  line-height: 40px;
  border-bottom: 1px solid #e0d9d9;
}

.bodyContent {
  font-size: 16px;
  color: #999999;
  line-height: 40px;
}

.bodyTitle {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #292828;
  line-height: 24px;
  border-bottom: 7px solid #f7f7f7;
  margin-top: 5px;
  font-weight: 800 !important;
}

.bodyClass {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bolder;
  color: #656363;
  border-bottom: 1px solid #e0d9d9;
  padding: 5px 0px;
  align-items: center;
}

.bodyList {
  margin-top: 5px;
  margin: 8px 0px;
  font-family: PingFangSC-Medium, PingFang SC;
}

.container {
  margin-top: 5px;
  padding: 5px 10px;
  background: #fff;
  margin: 8px 0px;
}

.specialStyle {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  padding: 10px 0px;
  align-items: center;
}

.specialContent {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  // font-weight: 400;
  color: #999999;
  padding-right: 5px;
  line-height: 25px;
  word-wrap: break-word;
  word-break: break-all;
  margin-top: 10px;
  padding: 0px 10px;
}

.listWrap {
  display: flex;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  padding: 10px 0px;
  width: calc(100vw);
}

.leftClass {
  flex: 1.1;
  text-align: left;
  padding-left: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: #333333;
}

.middleClass {
  flex: 0.5;
}

.rightClass {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  flex: 2;
  text-align: right;
  padding-right: 10px;
  line-height: 25px;
  word-wrap: break-word;
  word-break: break-all;
}

.noBgClass {
  // background: url(../../../static/img/loading.png) no-repeat;
  background-size: 100% 100%;
  height: calc(63vh);
}
/deep/ .ant-collapse-content > .ant-collapse-content-box {
  padding: 0;
}
/deep/ .ant-collapse-borderless > .ant-collapse-item {
  border-bottom: none;
  background-color: #fff;
  margin: 7px 0;
  svg {
    width: 17px;
    height: 17px;
    color: #999999;
  }
}
/deep/
  .ant-collapse-icon-position-right
  > .ant-collapse-item
  > .ant-collapse-header {
  font-size: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #333333;
}
.title-lv2 {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #333333;
}
</style>
